<template>
  <div class="input">
    <input
      class="wmy-check_input"
      :class="[state]"
      type="text"
      :placeholder="iptValue"
      v-model="addValue"
      @focus="stateFun('focus')"
      @blur="stateFun('blur')"
      @keyup.enter="handleClick"
    />
    <div v-if="isButton" class="wmy-button" @click="handleClick">
      {{ btnValue }}
    </div>
  </div>
</template>

<script>
export default {
  props: {
    iptValue: {
      type: String,
      default: "请开始你的输入把！",
    },
    btnValue: {
      type: String,
      default: "点击",
    },
    isButton: {
      type: Boolean,
      default: true,
    },
  },
  data() {
    return {
      addValue: "",
      isFocus: false,
    };
  },
  computed: {
    state() {
      if(this.isFocus){
        return this.isFocus == "focus" ? "max-width" : "min-width";
      }
    },
  },
  watch: {
    addValue(newValue) {
      this.$emit("getValue", newValue);
    },
  },
  methods: {
    handleClick() {
      this.$emit("handleClick", this.addValue);
    },
    stateFun(item) {
      this.isFocus = item;
      console.log(this.isFocus);
    },
  },
};
</script>

<style lang='scss' scoped>
.input {
  display: flex;
  height: 40px;

  .wmy-check_input {
    width: 100px;
    height: 40px;
  }
  .wmy-button {
    border-radius: 0;
    font-size: 16px;
  }
  .min-width {
    width: 100px;
    animation: samllInput 1s;
    animation-iteration-count: 1; //执行次数
    animation-fill-mode: forwards; //停止状态
  }
  .max-width {
    width: 100px;
    animation: bigInput 1s;
    animation-iteration-count: 1; //执行次数
    animation-fill-mode: forwards; //停止状态
  }
  @keyframes bigInput {
    0% {
      width: 100px;
    }
    100% {
      width: 300px;
    }
  }
  @keyframes samllInput {
    0% {
      width: 300px;
    }
    100% {
      width: 100px;
    }
  }
}
</style>